<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>

    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">

</head>

<body class="easyui-layout">

<div data-options="region:'north',title:'北方区域'" style="height:100px;"></div>

<!--<div data-options="region:'south',title:'南方区域'" style="height:100px;"></div>-->

<div data-options="region:'east',iconCls:'icon-reload',title:'东方区域'" style="width:100px;"></div>

<div data-options="region:'west',title:'西方区域'" id="aa" class="easyui-accordion" style="width:150px;height:200px;" >
    <div title="下拉菜单1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">

        <h3 style="color:#0099FF;">Accordion for jQuery</h3>

        <p>Accordion is a part of easyui framework for jQuery.

            It lets you define your accordion component on web page more easily.</p>

    </div>

    <div title="下拉菜单2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">

        content2

    </div>

    <div title="下拉菜单3">

        content3

    </div>


</div>

<div data-options="region:'center',title:'中间区域'" style="padding:5px;background:#eee;">
    <div id="mytabs" class="easyui-tabs" data-options="fit:true">
        <div data-options="title:'选项卡面板一',closable:true">选项卡面板一</div>
        <div data-options="title:'选项卡面板二',closable:true">选项卡面板二</div>
    </div>

</div>

</body>


</html>